<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <div class="home-title">
          <div class="home-title-img">
            <img src="../../public/imgs/headlogo.jpg" alt="" />
          </div>
          <div class="home-title-font">薪酬管理系统</div>
        </div>
        <div class="home-side-menu">
          <el-menu
            router
            class="el-menu-vertical-demo"
            background-color="#f5f5f5"
            :unique-opened="true"
            :default-active="defaultActive"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>组织机构</span>
              </template>
              <el-menu-item
                index="/home/organ"
                @click="changeBreadcrumb(['组织机构', '组织管理'])"
                >组织管理</el-menu-item
              >
              <el-menu-item
                index="/home/station"
                @click="changeBreadcrumb(['组织机构', '岗位管理'])"
                >岗位管理</el-menu-item
              >
              <el-menu-item
                index="/home/duty"
                @click="changeBreadcrumb(['组织机构', '职务管理'])"
                >职务管理</el-menu-item
              >
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>人事管理</span>
              </template>
              <el-menu-item
                index="/home/staff"
                @click="changeBreadcrumb(['人事管理', '人员管理'])"
                >人员管理</el-menu-item
              >
              <el-menu-item
                index="/home/formal"
                @click="changeBreadcrumb(['人事管理', '转正管理'])"
                >转正管理</el-menu-item
              >
              <el-menu-item
                index="/home/timer"
                @click="changeBreadcrumb(['人事管理', '离职管理'])"
                >离职管理</el-menu-item
              >
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>社会公积金</span>
              </template>
              <el-menu-item
                index="/home/soseplan"
                @click="changeBreadcrumb(['社会公积金', '社保方案'])"
                >社保方案</el-menu-item
              >
              <el-menu-item
                index="/home/profundplan"
                @click="changeBreadcrumb(['社会公积金', '公积金方案'])"
                >公积金方案</el-menu-item
              >
              <el-menu-item
                index="/home/incdec"
                @click="changeBreadcrumb(['社会公积金', '增减人员'])"
                >增减人员</el-menu-item
              >
              <el-menu-item
                index="/home/insrecord"
                @click="changeBreadcrumb(['社会公积金', '参保档案'])"
                >参保档案</el-menu-item
              >
              <el-menu-item
                index="/home/instype"
                @click="changeBreadcrumb(['社会公积金', '险种设置'])"
                >险种设置</el-menu-item
              >
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>员工薪资</span>
              </template>
              <el-menu-item
                index="/home/paypaper"
                @click="changeBreadcrumb(['员工薪资', '薪资档案'])"
                >薪资档案</el-menu-item
              >
              <el-menu-item
                index="/home/paytiaozheng"
                @click="changeBreadcrumb(['员工薪资', '薪资调整'])"
                >薪资调整</el-menu-item
              >
              <el-menu-item
                index="/home/dingpay"
                @click="changeBreadcrumb(['员工薪资', '定薪模板'])"
                >定薪模板</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>薪资核算</span>
              </template>
              <el-menu-item
                index="/home/payxiangmu"
                @click="changeBreadcrumb(['薪资核算', '薪资项目'])"
                >薪资项目</el-menu-item
              >
              <el-menu-item
                index="/home/payfangan"
                @click="changeBreadcrumb(['薪资核算', '薪资方案'])"
                >薪资方案</el-menu-item
              >
              <el-menu-item
                index="/home/paytaizhang"
                @click="changeBreadcrumb(['薪资核算', '薪资台账'])"
                >薪资台账</el-menu-item
              >
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>个税数据</span>
              </template>
              <el-menu-item
                index="/home/deduct"
                @click="changeBreadcrumb(['个税数据', '专项附加扣除'])"
                >专项附加扣除</el-menu-item
              >
              <el-menu-item
                index="/home/ratal"
                @click="changeBreadcrumb(['个税数据', '累计应纳税所得额'])"
                >累计应纳税所得额</el-menu-item
              >
              <el-menu-item
                index="/home/rules"
                @click="changeBreadcrumb(['个税数据', '计税规则'])"
                >计税规则</el-menu-item
              >
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>考勤数据</span>
              </template>
              <el-submenu index="7-1">
                <template slot="title">考勤计薪规则</template>
                <el-menu-item
                  index="/home/holiday"
                  @click="
                    changeBreadcrumb([
                      '考勤数据',
                      '考勤计薪规则',
                      '假期计薪规则',
                    ])
                  "
                  >假期计薪规则</el-menu-item
                >
                <el-menu-item
                  index="/home/people"
                  @click="
                    changeBreadcrumb([
                      '考勤数据',
                      '考勤计薪规则',
                      '旷工扣款规则',
                    ])
                  "
                  >旷工扣款规则</el-menu-item
                >
                <el-menu-item
                  index="/home/works"
                  @click="
                    changeBreadcrumb([
                      '考勤数据',
                      '考勤计薪规则',
                      '加班计薪规则',
                    ])
                  "
                  >加班计薪规则</el-menu-item
                >
                <el-menu-item
                  index="/home/cards"
                  @click="
                    changeBreadcrumb([
                      '考勤数据',
                      '考勤计薪规则',
                      '缺卡扣款规则',
                    ])
                  "
                  >缺卡扣款规则</el-menu-item
                >
                <el-menu-item
                  index="/home/late"
                  @click="
                    changeBreadcrumb([
                      '考勤数据',
                      '考勤计薪规则',
                      '迟到早退扣款规则',
                    ])
                  "
                  >迟到早退扣款规则</el-menu-item
                >
                <el-menu-item
                  index="/home/encourage"
                  @click="
                    changeBreadcrumb(['考勤数据', '考勤计薪规则', '全勤奖规则'])
                  "
                  >全勤奖规则</el-menu-item
                >
              </el-submenu>
              <el-menu-item
                index="/home/baobiao"
                @click="changeBreadcrumb(['考勤数据', '考勤报表'])"
                >考勤报表</el-menu-item
              >
            </el-submenu>
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>工资单管理</span>
              </template>
              <el-menu-item
                index="/home/pay"
                @click="changeBreadcrumb(['工资单管理', '工资单设置'])"
                >工资单设置</el-menu-item
              >
              <el-menu-item
                index="/home/grant"
                @click="changeBreadcrumb(['工资单管理', '工资发放'])"
                >工资发放</el-menu-item
              >
            </el-submenu>
            <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>系统设置</span>
              </template>
              <el-menu-item
                index="/home/user"
                @click="changeBreadcrumb(['系统设置', '用户管理'])"
                >用户管理</el-menu-item
              >
              <el-menu-item
                index="/home/role"
                @click="changeBreadcrumb(['系统设置', '角色管理'])"
                >角色管理</el-menu-item
              >
              <el-menu-item
                index="/home/person"
                @click="changeBreadcrumb(['系统设置', '个人中心'])"
                >个人中心</el-menu-item
              >
              <el-menu-item
                index="/home/individuation"
                @click="changeBreadcrumb(['系统设置', '个性化设置'])"
                >个性化设置</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="home-header-left">
            <span class="el-icon-s-fold home-header-icon"></span>
            <div>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item to="/home/index">首页</el-breadcrumb-item>
                <el-breadcrumb-item
                  v-for="(item, index) in elBreadcrumb"
                  :key="index"
                  >{{ item }}</el-breadcrumb-item
                >
              </el-breadcrumb>
            </div>
          </div>
          <div class="home-header-right">
            <div class="home-header-right-bage">
              <el-badge :value="12" class="item">
                <span class="el-icon-bell"></span>
              </el-badge>
            </div>
            <div class="home-header-right-menu">
              <el-menu
                class="el-menu-demo"
                background-color="#fff"
                mode="horizontal"
              >
                <el-submenu index="0">
                  <template slot="title">
                    <img class="touxiang" :src="face" alt="" />
                    <span :style="{ fontSize: '16px' }">{{ names }}</span>
                  </template>
                  <el-menu-item class="setting1" index="0-1"
                    >个人中心</el-menu-item
                  >
                  <el-menu-item index="0-2">设置</el-menu-item>
                  <el-menu-item index="0-3" @click="logOut()"
                    >退出登录</el-menu-item
                  >
                </el-submenu>
              </el-menu>
            </div>
          </div>
        </el-header>
        <el-main>
          <transition name="animation">
            <router-view />
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      defaultActive: null,
      elBreadcrumb: [],
      names: JSON.parse(sessionStorage.getItem("userdata")).account,
      face: JSON.parse(sessionStorage.getItem("userdata")).face,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    console.log(this.names, 44444);
    if (this.$route.path !== "/home") {
      this.defaultActive = this.$route.path;
    }
  },
  updated() {
    this.defaultActive = this.$route.path;
  },
  methods: {
    changeBreadcrumb(value) {
      this.elBreadcrumb = value;
    },
    // 退出登录
    logOut() {
      sessionStorage.removeItem("userdata");
      this.$router.replace({ name: "login" });
    },
  },
};
</script>
<style lang='less'>
.home {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .animation-enter,
  animation-leave-to {
    transform: translateX(50px);
    opacity: 0;
  }

  .animation-enter-active {
    transition: all 0.5s ease-in-out;
  }

  .animation-enter-to,
  animation-leave {
    transform: translateX(0);
    opacity: 1;
  }

  height: 100%;

  // ::-webkit-scrollbar {
  //     width: 0 !important;
  // }

  // ::-webkit-scrollbar {
  //     width: 0 !important;
  //     height: 0;
  // }

  .el-container {
    width: 100%;
    height: 100%;

    .el-aside {
      box-sizing: border-box;
      height: 100%;
      background: #f5f5f5;
      border-right: 1px solid #c00;
      overflow-y: scroll;
      overflow-x: hidden;

      .home-title {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        height: 60px;
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: #fff;
        background: var(--theme_button_color);

        box-sizing: border-box;
        border-bottom: 1px solid #c00;
        border-right: 1px solid #c00;

        .home-title-img {
          width: 40px;
          height: 40px;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }

        .home-title-font {
          font-size: 16px;
          color: #657180;
          font-weight: bold;
        }
      }

      .home-side-menu {
        padding-top: 60px;
        // -ms-overflow-style: none;
        // overflow-y: hidden;
        // height: 100vh;
        // width: 100%;
        // overflow-x: hidden;

        .el-menu {
          border-right: 0;
          overflow: hidden;
        }
      }
    }

    .el-aside::-webkit-scrollbar {
      display: none;
    }

    .el-container {
      width: calc(100% - 200px);
      height: 100%;

      .el-header {
        background: var(--theme_button_color);
        height: 50px;
        // background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #c00;
        z-index: 1000;

        .home-header-left {
          display: flex;
          justify-content: center;
          align-items: center;

          .home-header-icon {
            margin-right: 15px;
            color: #999999;
          }
        }
       

        .home-header-right {
          width: 25%;
          display: flex;
          justify-content: center;
          align-items: center;

          .home-header-right-bage {
            width: 40%;
            text-align: center;
          }

          .home-header-right-menu {
            width: 60%;

            .el-menu {
              border-bottom: 1px solid #c00;

              .touxiang {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                vertical-align: middle;
                margin-right: 10px;
              }
            }

            .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
              border-bottom: none;
            }
          }
        }
      }

      .el-main {
        height: calc(100% - 50px);
        background: #f5f7f9;
        margin: 0;
        overflow-x: hidden;
      }
    }
  }
}
</style>